// 1 饼形图 -- 封装成函数特点： 变量名方便, 方便ajax渲染
function setPie(arr){
   
 let myCharts = echarts.init(document.querySelector('.pie'))

 let  option  = {
  title:{
    text:'籍贯 Hometown',
    textStyle:{
      color:'#72787e'
    }
  },
  tooltip:{
    formatter:'{a}<br>{b} <b>{c}</b>人   占比{d}%'
  },
  series: [
    {
      name: '各地人员分布',
      type: 'pie',
      radius: ['10%', '60%'],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 5
      },
      data: arr
    }
  ]
}

 myCharts.setOption(option)
 
}
// 函数不调用，代码不执行
// setPie()


// 2 折线图 -- 封装成函数特点： 变量名方便, 方便ajax渲染
function setLine(obj){
   let myCharts = echarts.init(document.querySelector('.line'))

   let option = {
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    
    title: {
      text: '薪资 salary',
      textStyle:{
        color:"#6d767e"
      }
      
    },
  
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: obj.name
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '50%']
    },
    dataZoom: [
      {
        type: 'slider',
        start: 0,
        end: 15
      }
  
    ],
    legend:{top:20},
    color:["#ee6666","#5470c6"],
    series: [
      {
        name: '期望薪资',
        type: 'line',
        symbol: 'none',
        smooth:true,
        data:obj.Salary
      },
       {
        name: '实际薪资',
        type: 'line',
        symbol: 'none',
        smooth:true,
  
        data:obj.truesSalary
      }
    ],
    
  }

  myCharts.setOption(option)
}
// setLine()
// 3 柱形图 -- 封装成函数特点： 变量名方便, 方便ajax渲染
function setBar(obj){
    let myCharts = echarts.init(document.querySelector('.barChart'))

    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
    
      legend: { },
      xAxis: [
        {
          type: 'category',
          data: obj.group,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          min: 0,
          max: 100,
          interval: 10,
          axisLabel: {
            formatter: '{value}分'
          }
        },
        {
          type: 'value',
          min: 0,
          max: 10,
          interval: 1,
          axisLabel: {
            formatter: '{value}人'
          }
        }
      ],
      // 网格（整个图表区域设置）
      grid: {
        top: 30,
        bottom: 30,
        left: '7%',
        right: '7%'
      },
      series: [
        {
          name: '平均分',
          type: 'bar',
          barWidth:'15',// 设置柱形宽度
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 分';
            }
          },
          data: obj.avgScore
        },
        {
          name: '低于60分的人数',
          type: 'bar',
          barWidth:'15',// 设置柱形宽度
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 人';
            }
          },
          data: obj.lt60
        },
         {
          name: '60分到80分之间',
          type: 'bar',
          barWidth:'15',// 设置柱形宽度
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 人';
            }
          },
          data: obj.gt60
        },
         {
          name: '高于80分的人',
          type: 'bar',
          barWidth:'15',// 设置柱形宽度
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 人';
            }
          },
          data:obj.gt80
        },
      ]
    }
  

    myCharts.setOption(option)
}

// setBar()

// 4 地图 -- 封装成函数特点： 变量名方便, 方便ajax渲染
function setMap(mapData1,mapData2){
  let myCharts = echarts.init(document.querySelector('.map'))
  
 
  // 位置 + 经纬度
  var chinaGeoCoordMap = mapData1
  var chinaDatas = mapData2

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  }
  var series = [];
  [['顺义校区', chinaDatas]].forEach(function (item, i) {
    series.push({
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 5, //图标大小
      },
      lineStyle: {
        normal: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0.2 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {//圆环显示文字
            return params.data.name;
          },
          fontSize: 12
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 4 + val[2] * 5; //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f00'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        };
      }),
    },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            offset: [5, 0],
            color: '#9eca7f', // 目标点文字颜色
            formatter: '{b}',
            textStyle: {
              color: "#9eca7f"
            }
          },
          emphasis: {
            show: true,
            color: "#f60", // 目标点鼠标移入的颜色
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  });

  let option = {
    title: {
      text: '来京路线 From',
      textStyle: {
        color: '#6d767e'
      }
    },
    // tooltip: {
    //   trigger: 'item',
    //   backgroundColor: 'rgba(166, 200, 76, 0.82)',
    //   borderColor: '#FFFFCC',
    //   showDelay: 0,
    //   hideDelay: 0,
    //   enterable: true,
    //   transitionDuration: 0,
    //   extraCssText: 'z-index:100',
    //   formatter: function (params, ticket, callback) {
    //     //根据业务自己拓展要显示的内容
    //     var res = "";
    //     var name = params.name;
    //     var value = params.value[params.seriesIndex + 1];
    //     res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
    //     return res;
    //   }
    // },
    // backgroundColor: "#013954",
    // visualMap: { //图例值控制
    //   min: 0,
    //   max: 1,
    //   calculable: true,
    //   show: false,
    //   color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
    //   textStyle: {
    //     color: '#fff'
    //   }
    // },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          // color: 'rgba(51, 69, 89, .5)', //地图背景色
          // color: '#5a6fc0', //地图背景色
          // borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  };

  


  myCharts.setOption(option)
}

// setMap()


// 需求1：渲染班级概况, 页面加载直接渲染

 axios({
   url:'/student/overview'
 }).then(({data:res})=>{
    // 状态码判断
    if(res.code == 0){
      document.querySelector('.total').innerHTML = res.data.total
      document.querySelector('.avgSalary').innerHTML = res.data.avgSalary
      document.querySelector('.avgAge').innerHTML = res.data.avgAge
      document.querySelector('.proportion').innerHTML = res.data.proportion
    }
    
 })


// 需求2：点击切换   -- 显示隐藏第几次成绩

let btn = document.querySelector('.bar .btn')
let ul = document.querySelector('#batch')

btn.onclick = function(){
  if(ul.style.display === 'none'){
    ul.style.display = 'block'
  }else{
    ul.style.display = 'none'
  }
}

// 需求3；点击a链接/li标签发送ajax，获取成绩

let list = document.querySelectorAll('.bar li')

list.forEach((item,index)=>{
    item.onclick  = function(){
       axios({
         url:'/score/batch',
         params:{
           batch:index + 1
         }
       }).then(({data:res})=>{
          // 判断业务状态码
          if(res.code == 0){
            setBar(res.data)
          }
       })
    }   
})

// 触发第一个li标签的点击事件
list[0].click()



// 需求4：发送ajax， 获取所有学员信息   /折线图/饼图/地图

axios({
  url:'/student/list'
}).then(({data:res})=>{
   // 状态码判断
   if(res.code == 0){
     
     let lineData = {
      name:[],
      Salary:[],
      truesSalary:[]
       
     }

     let pieData = []

     // 地图制作
     let mapData1 = {"顺义校区":[116.4541,40.2539]}

     let mapData2 = []

     // 遍历res
     res.data.forEach(item=>{
       // 向姓名数组，期望薪资数组，实际薪资数组添加数据
       lineData.name.push(item.name)
       lineData.Salary.push(item.salary)
       lineData.truesSalary.push(item.truesalary)

       
     let index = pieData.findIndex(ele=> ele.name == item.province)
      if(index == -1){
        // 数组不存在这个对象,就添加一个
        pieData.push({value:1, name:item.province})
      }else{
        pieData[index].value++
      }

      //循环里面: 处理饼形图两个数据
       
      mapData1[item.county] = [item.jing, item.wei]
      // 判断: ele是一个数组,所以要使用他里面的变量需要ele[0],然后判断它的name和item.county是否相同
      let i = mapData2.findIndex(ele =>ele[0].name == item.county)
       if(i == -1){
         mapData2.push([{name:item.county,value:1}])
       }else{                  
         mapData2[i][0].value++
       }
     })

     //渲染折线图
     setLine(lineData)
     setPie(pieData)
     setMap(mapData1,mapData2)
   }
})
